<template>
  <div>
    <el-container style="flex-wrap: wrap;">
      <!-- 头部 -->
      <!-- 头部导航栏 -->
      <BreadHeader></BreadHeader>
      <XPannel>
        <template v-slot:header>
          <span>库存商品管理</span>
          <el-button
            type="primary"
            style="float: right; padding: 10px 20px; margin-left: 15px"
            @click="addproduct"
            >添加库存</el-button
          >
          <!-- 库存添加的抽屉-- -->
          <el-dialog
            title="商品名称添加区"
            :visible.sync="draweradd"
            ref="drawer"
            :show-close="true"
            style="text-align: center; width: 60%; margin: auto"
          >
            <el-form
              :model="numberValidateForm"
              ref="numberValidateForm"
              label-width="80px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="商品名称"
                prop="add_name"
                :rules="[
                  {
                    required: true,
                    message: '请输入商品名称',
                    trigger: 'blur',
                  },
                  {
                    min: 2,
                    max: 10,
                    message: '长度在 2 到 10 个字符',
                    trigger: 'blur',
                  },
                ]"
                style="width: 80%; margin: 20px auto"
              >
                <el-input
                  v-model.number="numberValidateForm.add_name"
                  autocomplete="off"
                  style="width: 280px"
                ></el-input>
              </el-form-item>
              <el-button
                type="primary"
                @click="submitForm('numberValidateForm')"
                style="margin-left: 45%"
                >提交</el-button
              >
              <el-button @click="resetForm('numberValidateForm')" style=""
                >重置</el-button
              >
            </el-form>
          </el-dialog>
        </template>

        <template v-sot:default>
          <!-- 搜索功能----- -->
          <el-row style="margin: 5px 0" :gutter="20">
            <el-col :span="1.8" style="padding: 0 0; margin: 0 10px">
              <template>
                <p style="color: #303133; font-size: 16px; line-height: 40px">
                  搜索栏：
                </p>
              </template>
            </el-col>
            <el-col :span="4" style="padding: 0 0">
              <el-input
                placeholder="请输入商品名称"
                v-model="search_name"
                clearable
                style="width: 230px"
              >
              </el-input>
            </el-col>
            <el-col :span="2" :offset="5" style="margin-left: 0px">
              <el-button
                type="primary"
                @click="searchusers"
                style="padding: 12px 15px"
              >
                <i class="el-icon-search"></i>搜索
              </el-button>
            </el-col>
          </el-row>
          <!-- 库存列表 -->
          <el-table
            ref="multipleTable"
            :data="inventlist"
            tooltip-effect="dark"
            style="width: 100%; margin: 15px auto"
            @selection-change="handleSelectionChange"
            height="450"
            border
          >
            <el-table-column label="全选" type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column prop="productname" label="商品名称" width="150">
            </el-table-column>
            <!-- repairetype -->
            <el-table-column prop="caozuo" label="操作">
              <template #default="scope">
                <el-button
                  @click="xiugaiobtain(scope.row)"
                  type="primary"
                  style="margin-left: 16px; padding: 5px 10px"
                >
                  <i class="el-icon-edit"></i>
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  @click="open(scope.row)"
                  style="padding: 5px 10px"
                  ><i class="el-icon-delete"></i> 删除</el-button
                >
                <!-- 人员修改的drawer -->
                <el-dialog
                  title="库存修改区"
                  :visible.sync="drawer"
                  :show-close="true"
                  style="text-align: center; width: 60%; margin: auto"
                >
                  <el-form
                    :model="edutruleForm"
                    ref="edutruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item
                      label="产品名称"
                      prop="name"
                      style="margin: 20px; width: 80%; margin: 20px auto"
                      :rules="[
                        {
                          required: true,
                          message: '请输入商品名称',
                          trigger: 'blur',
                        },
                        {
                          min: 2,
                          max: 10,
                          message: '长度在 2 到 10 个字符',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="edutruleForm.name"
                        placeholder="请输入产品名称"
                        style="width: 300px; display: block"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <el-button
                    type="success"
                    @click="submit('edutruleForm')"
                    style="padding: 10px 20px; margin: 5px"
                    >确认修改</el-button
                  >
                  <el-button
                    type="info"
                    @click="reset('edutruleForm')"
                    style="padding: 10px 20px; margin: 5px"
                    >重置已填</el-button
                  >
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          <!-- 批量操作 -->
          <div class="piliang" style="width: 300px; background: #ffffff">
            <el-button
              type="danger"
              @click="batchDelete"
              style="padding: 10px 15px; margin: 5px 0px"
              >批量删除</el-button
            >
            <el-button
              @click="toggleSelection()"
              type="primary"
              style="padding: 10px 15px; margin: 5px 10px"
              >取消选择</el-button
            >
            <!-- <el-button @click="clearSelection">取消批量</el-button> -->
          </div>
          <!-- 页码显示 -->
          <div
            class="block"
            style="padding: 20px; max-width: 600px; margin: auto"
          >
            <el-pagination
              :page-sizes="[4, 8, 12, 16]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalUsers"
              @size-change="handleChangeSize"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </template>
      </XPannel>
    </el-container>
  </div>
</template>
  
  <script>
import http from "@/api/http";
import BreadHeader from "@/components/BreadHeader.vue";
import XPannel from "@/components/XPannel.vue";
import { mapState } from "vuex";

export default {
  components: {
    XPannel,
    BreadHeader
  },
  computed: {
    ...mapState(["name", "picture"]),
    userName() {
      return this.name;
    },
    userPicture() {
      return this.picture;
    },
  },
  data() {
    return {
      draweradd: false,
      search_name: "",
      inventlist: [],
      totalUsers: 0, //总数
      pageSize: 4, //每页条数
      pageNum: 1, //当前页码
      numberValidateForm: {
        add_name: "",
      },
      edutruleForm: {
        name: "",
      },
      total_deng: null,
      total_shui: null,
      total_product: 0,
      xiugaiobtainuid: null,
      xiugaiobtainname: "",
      drawer: false,
      ids: [],
      selected: [],
    };
  },
  methods: {
    // 页码设置
    handleChangeSize(data) {
      this.pageSize = data;
      const isValue2Default = this.search_name === "";

      if (isValue2Default) {
        // 如果所有字段都是初始值，则调用inventlistfn
        this.inventlistfn();
      } else {
        this.searchusers();
      }
    },
    handleCurrentChange(data) {
      this.pageNum = data;
      const isValue2Default = this.search_name === "";
      if (isValue2Default) {
        // 如果所有字段都是初始值，则调用inventlistfn
        this.inventlistfn();
      } else {
        this.searchusers();
      }
    },
    // 添加抽屉中的提交重置按钮--灯泡
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          http
            .post("/kucun/product_add", {
              addname: this.numberValidateForm.add_name,
            })
            .then((res) => {
              this.draweradd = false;
              this.$message({
                type: "success",
                message: "添加成功!",
              });
              this.inventlistfn();
              console.log(res);
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    open(row) {
      this.$confirm("此操作将永久删除该报修申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(1, row);
          // this.deluserid = this.userlist[row].id
          this.deluserid = row.id;
          console.log(row);
          http
            .get("/kucun/product_del/" + row.id)
            .then((res) => {
              console.log(res);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.inventlistfn();
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量删除
    batchDelete() {
      if (this.selected.length === 0) {
        this.$message({
          message: "请先选择要删除的项",
          type: "warning",
        });
        return;
      }
      this.$confirm("此操作将永久删除选中的角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 批量删除---代办--ok
          this.selected.forEach((item) => {
            // const index = this.userlist.indexOf(item);
            let deluserids = [];
            deluserids.push(item.id);
            // let deluseridsting = JSON.stringify(deluserids);
            http
              .post("kucun/product_dels", {
                ids: deluserids,
              })
              .then((res) => {
                console.log(res);
              })
              .catch((error) => {
                console.log(error);
              });
            this.inventlistfn();
            // this.userlist.splice(index, 1);
          });
          this.selected = []; // 清空选中的项
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量取消
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 全选按钮
    handleSelectionChange(val) {
      this.selected = val;
      console.log(this.selected);
    },
    // 库存的搜索方法--代办
    searchusers() {
      http
        .get("/kucun/search_product", {
          params: {
            page: this.pageNum,
            page_size: this.pageSize,
            keyword: this.search_name,
          },
        })
        .then((response) => {
          console.log(response);
          this.inventlist = response.data.arr;
          this.totalUsers = response.data.totalNum;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 库存添加的方法--代办
    addproduct() {
      this.draweradd = true;
    },
    // 库存商品名称列表显示的方法
    inventlistfn() {
      http
        .get("/kucun/product_list", {
          params: {
            page: this.pageNum,
            page_size: this.pageSize,
          },
        })
        .then((response) => {
          console.log(response);
          console.log(response.data);
          this.inventlist = response.data.arr;
          this.totalUsers = response.data.totalNum;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 修改--获取数据
    xiugaiobtain(row) {
      this.drawer = true;
      console.log(row.id);
      let editid = row.id;
      http
        .get("kucun/product_name/" + editid)
        .then((response) => {
          console.log(response);
          this.xiugaiobtainuid = response.data[0].id;
          this.edutruleForm.name = response.data[0].productname;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 重置修改已填
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    // 修改--保存数据
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          http
            .post("/kucun/save_product_name/" + this.xiugaiobtainuid, {
              productname: this.edutruleForm.name,
            })
            .then((response) => {
              console.log(response);
              this.inventlistfn();
              this.drawer = false;
              this.$message({
                message: "恭喜你，库存修改成功！",
                type: "success",
              });
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.inventlistfn();
  },
};
</script>
  
  <style scoped>
</style>